<template>
	<view>
		<view>
			<view class="header">
				<uni-nav-bar dark background-color="#2477f4" title="维修任务" left-icon="left" @clickLeft="back"
					:border="false"></uni-nav-bar>

				<view class="search">
					<input placeholder="输入需要搜索的内容" />
					<view class="entre">🔍</view>
				</view>

				<view class="title">
					<view class="contain">共3条</view>
					<view class="contain">
						<view>状态</view>
						<view class="select">
							全部
							<view class="arrow"></view>
						</view>
					</view>
					<view class="contain">
						<view>维修方式</view>
						<view class="select">
							全部
							<view class="arrow"></view>
						</view>
					</view>
					<view class="contain">
						<uni-datetime-picker >
							<image src="/static/calander-white.png" mode="" class="img"></image>
							日期
						</uni-datetime-picker>
					</view>
					
				</view>
			</view>

			<view class="body">
				<view class="list">
					<view class="top">
						<view class="num">维修单号: 3535252</view>
						<view class="state">进行中</view>
					</view>
					<view class="mid">
						<view >
							<view class="info1">
								<text>维修方式:</text>
								<text>到店维修</text>
							</view>
							<view class="info2">
								<text>预约日期:</text>
								<text>2023-02-13 12:00</text>
							</view>
						</view>
						<navigator class="detail" url="/packageRepair/pages/maintenanceDetail/maintenanceDetail">查看详情</navigator>
					</view>
				</view>
				
				<view class="list">
					<view class="top">
						<view class="num">维修单号: 3535252</view>
						<view class="state">进行中</view>
					</view>
					<view class="mid">
						<view >
							<view class="info1">
								<text>维修方式:</text>
								<text>到店维修</text>
							</view>
							<view class="info2">
								<text>预约日期:</text>
								<text>2023-02-13 12:00</text>
							</view>
						</view>
						<navigator url="/packageRepair/pages/maintenanceDetail/maintenanceDetail" class="detail">查看详情</navigator>
					</view>
				</view>
				
				<view class="list">
					<view class="top">
						<view class="num">维修单号: 3535252</view>
						<view class="state">进行中</view>
					</view>
					<view class="mid">
						<view >
							<view class="info1">
								<text>维修方式:</text>
								<text>到店维修</text>
							</view>
							<view class="info2">
								<text>预约日期:</text>
								<text>2023-02-13 12:00</text>
							</view>
						</view>
						<view class="detail">查看详情</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.header {
		background: linear-gradient(#2979ff, #0662e6);
		height: 400rpx;
		padding-top: 20rpx;
	}


	h3 {
		text-align: center;
		color: #fff;
		font-size: 38rpx;
		font-weight: normal;
	}

	.search {
		width: 330px;
		background-color: white;
		display: flex;
		height: 40px;
		border-radius: 50px;
		margin: 0 auto;
		padding-left: 20px;
		line-height: 40px;
		margin-top: 25px;
	}

	.search input {
		margin-top: 9px;

	}

	.entre {
		margin-left: 122px;
	}

	.title {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
		color: #fff;
	}

	.contain {
		text-align: center;
	}
	.img{
		width: 30rpx;
		height: 30rpx;
		padding-right: 5rpx;
		vertical-align: middle;
	}

	.body {
		margin: 0rpx 10px;
		margin-top: -30px;
		
	}

	.list {
		padding: 0 10px;
		border-radius: 10px;
		background-color: #fff;
		overflow: hidden;
		margin-top: 10px;
	}

	.top {
		display: flex;
		justify-content: space-between;
		border-bottom: solid 3px #efefef;
		padding-bottom: 8px;
		margin-top: 12px;
	}

	.num {
		font-weight: 600;
	}

	.state {
		color: #2979ff;
		font-size: 8px;
	}
	.mid{
		display: flex;
		justify-content: space-between;
		padding-bottom: 15px;
	}
	.detail{
		margin: auto 0;
		background-color: #0662e6;
		border-radius: 50px;
		padding:0 10px;
		font-size: 10px;
		color: #fff;
		height: 25px;
		line-height: 25px;
	}
	.info1{
		margin-top: 10px;
	}
	.info2{
		margin-top: 5px;
	}
	
	.select{
		padding: 5rpx 10rpx;
		padding-left: 30rpx;
		margin-bottom: 20rpx;
		width: 100rpx;
		height: 50rpx;
		border-radius: 30rpx;
		position: relative;
		background-color: gray;
		text-align: left;
		background-color: rgba(0, 0, 0, 0.2);
	}
	
	.select .arrow{
		position: absolute;
		right: 20rpx;
		top: 18rpx;
		width: 10rpx;
		height: 10rpx;
		border-top: 4rpx solid #fff;
		border-right: 4rpx solid #fff;
		transform: rotate(135deg);
	}
	
</style>